<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>订单管理</title>
		<link type="text/css" rel="stylesheet" href="../../../css/index.css" />
		<link type="text/css" rel="stylesheet" href="../../../layui/css/layui.css" />
		<link type="text/css" rel="stylesheet" href="../../../css/manage/order.css" />
	</head>
	<body>
		<header></header>
		<div id="menu"></div>
		<div class="content">
			<div class="content-title">订单管理</div>
			<div class="content-table">
				<div class="order-list">
					<ul class="layui-nav clearfix second-nav">
					  <li class="layui-nav-item layui-this">
						  <a >全部订单(<span>1000</span>)</a>
					  </li>
					  <li class="layui-nav-item ">
						<a >待付款(<span>29</span>)</a>
					  </li>
					  <li class="layui-nav-item">
						  <a >待发货(<span>29</span>)</a>
						  </li>
					  <li class="layui-nav-item">
						<a >已完成(<span>29</span>)</a>
					  </li>
					  <li class="layui-nav-item">
						  <a >已关闭(<span>29</span>)</a>
					  </li>
					</ul>
				</div>
				<div class="order-form">
					<form class="layui-form">
						<div class="layui-form-item">
							<div class="layui-inline" >
								<label class="layui-form-label" style="width:160px;">商品名称/订单编号：</label>
								<div class="layui-input-block" style="margin-left:160px;">
									<input type="text" name="" placeholder="请输入商品名称/订单编号" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label" style="width:120px;">姓名/手机号：</label>
								<div class="layui-input-block" style="margin-left:120px;">
								<input type="text" name="" placeholder="请输入姓名/手机号" autocomplete="off" class="layui-input">
								</div>
							</div>
							 <div class="layui-inline">
								<label class="layui-form-label" style="width:100px;">下单时间：</label>
								<div class="layui-input-inline"  style="">
									<input type="text" class="layui-input" id="orderDate" placeholder="请选择下单时间">
								</div>
							</div>
							<div class="layui-inline" >
								<div class="layui-input-block" style="margin-left:10px;margin-bottom: 5px;min-height: 30px;">
									<input type="button" name="" value="搜索"  class="layui-btn">
								</div>
							</div>
						</div>
						<div class="layui-form-item" style="text-align: right;">
							<div class="layui-inline" >
								<div class="layui-input-block" style="margin-left:10px;margin-bottom: 5px;min-height: 30px;">
									<input type="button" name="" value="导出数据"  class="layui-btn">
								</div>
							</div>
							<div class="layui-inline" >
								<div class="layui-input-block" style="margin-left:10px;margin-bottom: 5px;min-height: 30px;">
									<input type="button" name="" value="下载发货单"  class="layui-btn">
								</div>
							</div>
							<div class="layui-inline" >
								<div class="layui-input-block" style="margin-left:10px;margin-bottom: 5px;min-height: 30px;">
									<input type="button" name="" value="打印发货单"  class="layui-btn">
								</div>
							</div>
							<div class="layui-inline" >
								<div class="layui-input-block" style="margin-left:10px;margin-bottom: 5px;min-height: 30px;">
									<!-- <input type="button" name="" value="排序方式"  class="layui-btn"> -->
									<select name="interest" lay-filter="aihao" >
										<option value="">排序方式</option>
										<option value="0">近三天时间</option>
										<option value="1">近一周时间</option>
										<option value="2">近一月时间</option>
									</select>
								</div>
							</div>
						</div>
					</form>
					<div>
						<table class="layui-table" id="orderList"  lay-filter="test">
							
						</table>
					</div>
					
					<div class="orderManage">
						<div class="checkboxList">
							<input type="checkbox"  value=""/>
							<span>全选</span>
						</div>
						<div class="btnList">
							<input type="button" class="closeOrder_btn" value="关闭订单" />
							<input type="button" class="delOrder_btn" value="删除订单" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<div class="sendGoods">
		<!-- <span class="">填写物流信息</span> -->
		<form class="layui-form">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">配送方式：</label>
					<div class="layui-input-block">
						<select name="interest" lay-filter="aihao">
							<option value=""></option>
							<option value="0">快递</option>
							<option value="1" selected="">EMS</option>
							<option value="2">平邮</option>
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">物流公司：</label>
					<div class="layui-input-block">
						<select name="interest" lay-filter="aihao">
							<option value=""></option>
							<option value="0">快递</option>
							<option value="1" selected="">EMS</option>
							<option value="2">平邮</option>
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item trackNum">
				<div class="layui-inline">
					<label class="layui-form-label">运单号：</label>
					<div class="layui-input-block">
						<input type="text" placeholder="" class="layui-input" />
					</div>
				</div>
			</div>
			<div class="layui-form-item publishTime">
				<div class="layui-inline">
					<label class="layui-form-label">发布时间：</label>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" id="test5" placeholder="yyyy-MM-dd HH:mm:ss">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline logisticsStatus">
					<label class="layui-form-label">物流状态：</label>
					<div class="layui-input-inline clearfix">
						<input type="text" value="待发货" class="layui-input fl"  readonly="readonly"/>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<div class="layui-input-inline clearfix">
						<input type="button" data-type="save" id="sendGoods" value="立即发货" class="fl delivery" />
					</div>
				</div>
			</div>
	</div>
<script type="text/html" id="barDemo">
						<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看详情</a>
            {{# if(d.edit=="0"){ }}
						<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除订单</a>
            {{# } else if(d.edit=="1"){}}
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="jiechu">关闭订单</a>
						{{# } else if(d.edit=="2"){}}
						<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="fahuo">订单发货</a>
            {{# } }}
	</script>
	<script src="../../../js/plugIn/jquery-3.3.1.min.js"></script>
	<script src="../../../layui/layui.all.js"></script>
	<script src="../../../js/plugIn/metisMenu.js"></script>
	<script>
		var menuList = "dingdanguanli";
		var menuSec = "dingdanliebiao";
		$('header').load('../home.html');
		$('#menu').load('../menu.html');
		$(function(){
				var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
				var table = layui.table;
				var laydate = layui.laydate;
				var layer = layui.layer;
				var laypage  = layui.laypage ;
				
				//监听导航点击
				element.on('nav(demo)', function(elem){
					layer.msg(elem.text());
				});
				//自定义格式
				laydate.render({
					elem: '#orderDate'
					,format: 'yyyy年MM月dd日'
				});
				//展示已知数据
			table.render({
				elem: '#orderList'
				,cols: [[ ,//标题栏
						{type: 'checkbox'}
					,{field: 'id', title: '订单编号'}
					,{field: 'username', title: '提交时间' }
					,{field: 'email', title: '用户账号'}
					,{field: 'sign', title: '订单金额'}
					,{field: 'sex', title: '支付方式' }
					,{field: 'orderStatus', title: '订单状态'}
					,{toolbar:'#barDemo',title: '操作',width:160}
				]]
				,data: [{
					"id": "10001"
					,"username": "杜甫"
					,"email": "xianxin@layui.com"
					,"sex": "男"
					,"city": "浙江杭州"
					,"sign": "人生恰似一场修行"
					,"experience": "116"
					,"ip": "192.168.0.8"
					,"logins": "108"
					,"orderStatus": "待付款"
					,"edit":"0"
				}, {
					"id": "10002"
					,"username": "李白"
					,"email": "xianxin@layui.com"
					,"sex": "男"
					,"city": "浙江杭州"
					,"sign": "人生恰似一场修行"
					,"experience": "12"
					,"ip": "192.168.0.8"
					,"logins": "106"
					,"joinTime": "2016-10-14"
					,"orderStatus": "待发货"
					,"edit":"2"
				}, {
					"id": "10003"
					,"username": "王勃"
					,"email": "xianxin@layui.com"
					,"sex": "男"
					,"city": "浙江杭州"
					,"sign": "人生恰似一场修行"
					,"experience": "65"
					,"ip": "192.168.0.8"
					,"logins": "106"
					,"orderStatus": "已完成"
					,"edit":"1"
				}, {
					"id": "10004"
					,"username": "贤心"
					,"email": "xianxin@layui.com"
					,"sex": "男"
					,"city": "浙江杭州"
					,"sign": "人生恰似一场修行"
					,"experience": "666"
					,"ip": "192.168.0.8"
					,"logins": "106"
					,"orderStatus": "已关闭"
					,"edit":"0"
				}, {
					"id": "10005"
					,"username": "贤心"
					,"email": "xianxin@layui.com"
					,"sex": "男"
					,"city": "浙江杭州"
					,"sign": "人生恰似一场修行"
					,"experience": "86"
					,"ip": "192.168.0.8"
					,"logins": "106"
					,"orderStatus": "待付款"
					,"edit":"0"
				}, {
					"id": "10006"
					,"username": "贤心"
					,"email": "xianxin@layui.com"
					,"sex": "男"
					,"city": "浙江杭州"
					,"sign": "人生恰似一场修行"
					,"experience": "12"
					,"ip": "192.168.0.8"
					,"logins": "106"
					,"orderStatus": "待付款"
					,"edit":"1"
				}]
				,even: true
				,page: true //是否显示分页
				,limits: [5, 10, 15]
				,limit: 10 //每页默认显示的数
				//,skin: 'line' //表格风格
				,done:function(res, curr, count){//数据,页码,数据总量
					//alert(111);
					
				}
			});
			
			//监听行工具事件
			var sendGoods;
			table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值
				if(layEvent === 'detail'){
					if(data.orderStatus){
						window.open("obligation.html?status="+data.orderStatus);
					}
					
				} else if(layEvent === 'del'){
					layer.confirm('真的删除行么', function(index){
						obj.del(); //删除对应行（tr）的DOM结构
						layer.close(index);
						//向服务端发送删除指令
					});
				} else if(layEvent === 'edit'){
					layer.msg('编辑操作');
				}else if(layEvent ==='fahuo'){
					sendGoods = layer.open({
												type: 1,
												title:'填写物流信息',
												content: $('.sendGoods'),
												area: ['400px', '500px'], //宽高
												cancel: function(){ 
														$('.sendGoods').css('display','none');
													}
											})
				}
			});
			$("#sendGoods").click(function(){
				layer.close(sendGoods);
				$('.sendGoods').css('display','none');
			})
		})
		
		
		//监听表格复选框选择
		/* table.on('checkbox(demo)', function(obj){
			console.log(obj)
		}); */
		
		
	</script>
</html>